<template>
  <div class="countyInput">
    <el-form :inline="true" :model="form" label-width="90px">
      <div class="maintitle">竣工单位信息</div>
      <div class="formcontent">
        <div class="basicInformation">
          竣工测绘单位：{{ form.completedSurveyBaseInfo.companyName }}
          <span>
            测绘开始时间：{{
            form.completedSurveyBaseInfo.surveyStartTime
            }}
          </span>
          <span>
            测绘完成时间：{{
            form.completedSurveyBaseInfo.surveyEndTime
            }}
          </span>
        </div>
        <el-form-item label="竣工测绘单位负责人" label-width="138px" style="margin-right:60px;">
          <el-select
            v-model="form.completedSurveyBaseInfo.companyManagerId"
            placeholder
            :disabled="disabled"
          >
            <el-option
              v-for="item in companyPersonList"
              :label="item.name"
              :value="item.userId"
              :key="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="竣工测绘技术负责人" label-width="138px" style="margin-right:60px;">
          <el-select
            v-model="form.completedSurveyBaseInfo.technicalManagerId"
            placeholder
            :disabled="disabled"
          >
            <el-option
              v-for="item in companyPersonList"
              :label="item.name"
              :value="item.userId"
              :key="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="maintitle" style="margin-top:40px;">竣工测绘基本信息</div>
      <div class="formcontent">
        <el-form-item label="地貌类型：" label-width="85px">
          <el-input
            :readonly="disabled"
            type="text"
            v-model="form.completedSurveyBaseInfo.landFormType"
            style="width:200px;"
          />
        </el-form-item>
        <el-form-item label="土壤类型：" label-width="85px">
          <el-input
            :readonly="disabled"
            type="text"
            v-model="form.completedSurveyBaseInfo.soilType"
            style="width:200px;"
          />
        </el-form-item>
        <el-form-item label="水源情况：" label-width="85px">
          <el-input
            :readonly="disabled"
            type="text"
            v-model="form.completedSurveyBaseInfo.waterType"
            style="width:200px;"
          />
        </el-form-item>
        <el-form-item label="图幅号：" label-width="85px">
          <el-input
            :readonly="disabled"
            type="text"
            min="0"
            v-model="form.completedSurveyBaseInfo.drawingNumber"
            style="width:200px;"
          />
        </el-form-item>
      </div>
      <div class="formcontent">
        <!-- <div class="basicInformationitem">图幅号：{{form.completedSurveyBaseInfo.drawingNumber}}</div> -->
        <!-- <div style="clear:both;"></div> -->

        <el-form-item label="红线范围内总面积" label-width="125px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyBaseInfo.totalAreaInRedline"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="实际总规模" label-width="85px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyBaseInfo.actualTotalScale"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="其中实际开发规模" label-width="150px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyBaseInfo.actualDevelopmentScale"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="其中实际整理规模" label-width="150px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyBaseInfo.actualConsolidationScale"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="实际复垦规模" label-width="100px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyBaseInfo.actualReclamationScale"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
      </div>

      <div class="maintitle" style="margin-top:40px;">新增耕地情况</div>
      <div class="formcontent">
        <el-form-item label="新增耕地面积" label-width="160px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyNewLand.newCultivatedLandArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="新增水田面积" label-width="160px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyNewLand.newPaddyArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="新增旱地面积" label-width="160px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyNewLand.newDryLandArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <div>
          <el-form-item label="整理项目前期耕地面积" label-width="160px">
            <el-input
              :readonly="disabled"
              type="number"
              min="0"
              v-model="form.completedSurveyNewLand.earlyArrangementArea"
              style="width:200px;"
            >
              <i slot="suffix">公顷</i>
            </el-input>
          </el-form-item>
          <el-form-item label="整理项目竣工耕地面积" label-width="160px">
            <el-input
              :readonly="disabled"
              type="number"
              min="0"
              v-model="form.completedSurveyNewLand.completedArrangementArea"
              style="width:200px;"
            >
              <i slot="suffix">公顷</i>
            </el-input>
          </el-form-item>
          <el-form-item label="整理新增耕地面积" label-width="160px">
            <el-input
              :readonly="disabled"
              type="number"
              min="0"
              v-model="form.completedSurveyNewLand.newArrangementArea"
              style="width:200px;"
            >
              <i slot="suffix">公顷</i>
            </el-input>
          </el-form-item>
        </div>
        <el-form-item label="开发项目前期耕地面积" label-width="160px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyNewLand.earlyDevelopmentArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="开发项目竣工耕地面积" label-width="160px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyNewLand.completedDevelopmentArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="开发新增耕地面积" label-width="160px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyNewLand.newDevelopmentArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
      </div>

      <div class="maintitle" style="margin-top:40px;">项目建设规模</div>
      <div class="formcontent">
        <el-form-item label="变更实施规模" label-width="97px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyDiffInfo.changeImplementationScale"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="竣工实施规模" label-width="97px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyDiffInfo.completedImplementationScale"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <div>
          <el-form-item label="差异原因" label-width="97px">
            <el-input
              :readonly="disabled"
              type="textarea"
              placeholder="请输入内容"
              :rows="6"
              v-model="form.completedSurveyDiffInfo.scaleDiffReason"
              style="width:850px"
            ></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="maintitle" style="margin-top:40px;">新增耕地面积测算</div>
      <div class="formcontent">
        <el-form-item label="新增耕地面积测算" label-width="125px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="form.completedSurveyDiffInfo.changeNewCultivatedLandArea"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="竣工新增耕地面积" label-width="125px">
          <el-input
            :readonly="disabled"
            type="number"
            min="0"
            v-model="
              form.completedSurveyDiffInfo.completedNewCultivatedLandArea
            "
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <div>
          <el-form-item label="差异原因" label-width="97px">
            <el-input
              :readonly="disabled"
              type="textarea"
              placeholder="请输入内容"
              :rows="6"
              v-model="form.completedSurveyDiffInfo.areaDiffReason"
              style="width:850px"
            ></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="maintitle" style="margin-top:40px;">竣工测绘成果</div>
      <div class="formcontent">
        <el-form-item label="竣工测绘成果模板" label-width="128px">
          <el-button size="small" @click="handleDownload">下载</el-button>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="竣工测绘成果" label-width="128px">
          <el-upload
            v-if="!disabled"
            class="upload-demo"
            :action="uploadUrl"
            :file-list="fileResult"
            :on-success="getfileResult"
            :on-remove="removefileResult"
            :on-progress="startUpload"
            :data="uploaddata"
            :headers="uploadheaders"
            :disabled="disabled"
          >
            <el-button v-if="!disabled" size="small">上传</el-button>
            <!-- <el-button @click="seePdf(0)" v-if="disabled" size="small"
              >查看</el-button
            >-->
          </el-upload>
          <seeFujianForList
            v-if="disabled && fileResult"
            download="1"
            :file-url="$https + (fileResult.length > 0 ? fileResult[0].url : '')"
            :file-obj="fileResult"
            :file-num="0"
          />
        </el-form-item>
      </div>
      <div>
        <div class="btn">
          <el-button :disabled="cantSubmit" v-if="!disabled" type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="back">返回</el-button>
        </div>
      </div>
    </el-form>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="上传失败" :visible.sync="failDataFlag" width="50%">
      <div class="pdfBox">
        <el-table :data="failList" border style="width: 100%">
          <el-table-column label="文件名">
            <template slot-scope="scope">
              <p>{{scope.row.fileName}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="msg" label="错误信息">
            <template slot-scope="scope">
              <p style="color:red;">{{scope.row.msg}}</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getResultDetail,
  getCompanyPersonList,
  downloadTemplate,
  saveResult
} from "@/api/project1/completedMapping/countyInput";
import config from "@/config/index";
import store from "@/store";
import seeFujianForList from "@/components/seeFujianForList";
export default {
  components: {
    seeFujianForList
  },
  data() {
    return {
      form: {
        completedSurveyBaseInfo: {
          projectId: localStorage.getItem("projectId"),
          companyId: "",
          surveyStartTime: "",
          surveyEndTime: "",
          companyManagerId: "",
          technicalManagerId: "",
          drawingNumber: "",
          totalAreaInRedline: "",
          landFormType: "丹霞地貌",
          soilType: "黄土地",
          waterType: "水库",
          actualTotalScale: "",
          actualDevelopmentScale: "",
          actualConsolidationScale: 10,
          actualReclamationScale: "",
          // zipFile: "",
          resultFileId: ""
        },
        completedSurveyNewLand: {
          projectId: localStorage.getItem("projectId"),
          newCultivatedLandArea: "",
          newPaddyArea: "",
          newDryLandArea: "",
          earlyArrangementArea: "",
          completedArrangementArea: "",
          newArrangementArea: "",
          earlyDevelopmentArea: "",
          completedDevelopmentArea: "",
          newDevelopmentArea: ""
        },
        completedSurveyDiffInfo: {
          projectId: localStorage.getItem("projectId"),
          changeImplementationScale: "",
          completedImplementationScale: "",
          scaleDiffReason: "",
          changeNewCultivatedLandArea: "",
          completedNewCultivatedLandArea: "",
          areaDiffReason: ""
        }
      },
      companyPersonList: [],
      tableData: [
        {
          type: "0°-2°"
        },
        {
          type: "2°-6°"
        },
        {
          type: "6°-15°"
        },
        {
          type: "15°-20°"
        }
      ],
      fileResult: [],
      uploaddata: {
        projectId: ""
      },
      uploadUrl:
        config.baseUrl + "/renovation/completedSurvey/result/zipUpload", //上传接口
      uploadheaders: {
        authorization: store.getters.token
      },
      disabled: true,
      pdfUrl: "",
      pdfFlag: false,
      pdfName: "",
      failDataFlag: false,
      failList: [],
      cantSubmit: false
    };
  },

  created() {
    if (this.$route.name === localStorage.getItem("key")) {
      this.disabled = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.disabled = true;
    }
    // this.projectId = this.$route.query.projectId;
    this.projectId = localStorage.getItem("projectId");
    this.uploaddata.projectId = localStorage.getItem("projectId");
    this.getResultDetail();
  },
  methods: {
    //开始上传
    startUpload(file) {
      console.log("开始上传");
      this.cantSubmit = true;
    },
    back() {
      this.$router.push("/projectManagement/projectImplementation/dealwith");
    },
    //查看当前PDF
    seePdf(num) {
      this.pdfFlag = true;
      this.pdfUrl = this.fileResult[num].url;
      this.pdfName = this.fileResult[num].name;
    },
    onSubmit() {
      if (
        this.form.completedSurveyBaseInfo.surveyStartTime == null ||
        this.form.completedSurveyBaseInfo.surveyStartTime == "" ||
        this.form.completedSurveyBaseInfo.surveyEndTime == null ||
        this.form.completedSurveyBaseInfo.surveyEndTime == ""
      ) {
        this.$message({
          message: "未录入前期测绘信息",
          type: "warning"
        });
        return;
      }

      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      this.form.completedSurveyDiffInfo.projectId = localStorage.getItem(
        "projectId"
      );
      console.log(this.form, "提交参数");
      saveResult(this.form)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.$router.push(
            "/projectManagement/projectImplementation/dealwith"
          );
          // if(res.code==1000){
          //   this.$message.success('保存成功');
          //   this.$router.push('/completedMapping/countyCheck?projectId='+this.projectId);
          // }
        })
        .catch(err => {
          loading.close();
        });
    },
    getreport(response, file, fileList) {
      this.fileList = [];
      this.fileList.push(file);
    },
    getResultDetail() {
      getResultDetail({
        projectId: this.projectId
      }).then(res => {
        if (res.data.completedSurveyBaseInfo) {
          this.form.completedSurveyBaseInfo = res.data.completedSurveyBaseInfo;

          this.getCompanyPersonList(res.data.completedSurveyBaseInfo.companyId);
          if (res.data.completedSurveyBaseInfo.zipFile) {
            this.form.completedSurveyBaseInfo.resultFileId =
              res.data.completedSurveyBaseInfo.zipFile.id;
            var notifyFileData = {
              name: res.data.completedSurveyBaseInfo.zipFile.fileName,
              url: res.data.completedSurveyBaseInfo.zipFile.filePath
            };
            this.fileResult.push(notifyFileData);

            console.log(
              this.fileResult,
              "this.fileResultthis.fileResultthis.fileResult"
            );
          }
        }
        if (res.data.completedSurveyNewLand) {
          this.form.completedSurveyNewLand = res.data.completedSurveyNewLand;
        }
        if (res.data.completedSurveyDiffInfo) {
          this.form.completedSurveyDiffInfo = res.data.completedSurveyDiffInfo;
        }
      });
    },
    getCompanyPersonList(enterpriseid) {
      getCompanyPersonList({
        enterpriseid: enterpriseid
      }).then(res => {
        this.companyPersonList = res.data;
      });
    },
    handleDownload() {
      // downloadFile(this.planningDesignFile.id)
      window.open(
        `${this.$config.baseUrl}` +
          "/renovation/templatefile/竣工测绘成果数据模板.zip"
      );
    },
    getfileResult(res, file) {
      this.fileResult = [];
      var files = {
        name: file.name,
        url: config.uploadUrl
      };
      console.log(
        res.data.successData,
        "res.data.successData.zipFileres.data.successData.zipFile"
      );
      this.cantSubmit = false;
      if (res.data.successData) {
        this.form.completedSurveyBaseInfo.resultFileId =
          res.data.successData.resultFileId;
        this.fileResult.push(files);
        if (res.data.successData.actualConsolidationScale) {
          this.form.completedSurveyBaseInfo.actualConsolidationScale =
            res.data.successData.actualConsolidationScale;
        }
        if (res.data.successData.actualDevelopmentScale) {
          this.form.completedSurveyBaseInfo.actualDevelopmentScale =
            res.data.successData.actualDevelopmentScale;
        }
        if (res.data.successData.actualReclamationScale) {
          this.form.completedSurveyBaseInfo.actualReclamationScale =
            res.data.successData.actualReclamationScale;
        }
        if (res.data.successData.actualTotalScale) {
          this.form.completedSurveyBaseInfo.actualTotalScale =
            res.data.successData.actualTotalScale;
        }
        if (res.data.successData.totalAreaInRedline) {
          this.form.completedSurveyBaseInfo.totalAreaInRedline =
            res.data.successData.totalAreaInRedline;
        }
        if (res.data.successData.drawingNumber) {
          this.form.completedSurveyBaseInfo.drawingNumber =
            res.data.successData.drawingNumber;
        }
      } else {
        this.failDataFlag = true;
        this.failList = res.data.failData;
      }
    },
    removefileResult(file, fileList) {
      this.fileResult = [];
      this.form.completedSurveyBaseInfo.resultFileId = "";
    }
  }
};
</script>
<style lang="scss" scoped>
.countyInput {
  padding: 20px;
  min-height: calc(100vh - 154px);
  background-color: #fff;
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
  }
  .formcontent {
    margin-top: 30px;
    .basicInformation {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #8c8c8c;
      margin-bottom: 20px;
      span {
        margin-left: 60px;
      }
    }
    .basicInformationitem {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #8c8c8c;
      float: left;
      width: 251px;
      margin-bottom: 20px;
    }
  }
}
</style>
